import React, { Component } from 'react'
import { connect } from 'react-redux'
import Taro from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import { AtInput } from 'taro-ui'

import { SpCell, SpNavBar } from '@/components'
import api from '@/api'
import { isWxWeb, showToast } from '@/utils'

import './edit-info.scss'

@connect(({ colors }) => ({
  colors: colors.current
}))
export default class applicationForm extends Component {
  constructor(props) {
    super(props)
    this.state = {
      info: {}
    }
  }
  // 可以使用所有的 React 生命周期方法
  componentDidMount() {}

  // onLoad
  async onLoad() {
    const { telephone, promoter_name } = await api.distribution.info()
    this.setState({
      info: { telephone, promoter_name }
    })
  }

  // onReady
  onReady() {}

  // 对应 onShow
  componentDidShow() {}

  // 对应 onHide
  componentDidHide() {}

  // 对应 onPullDownRefresh，除了 componentDidShow/componentDidHide 之外，
  // 所有页面生命周期函数名都与小程序相对应
  onPullDownRefresh() {}

  /**
   * 输入框回调
   * @param {String} name 输入框名称
   * @param {String/Number} val
   * @param {Object} e
   */
  handleChange = (name, val, e) => {
    const nInfo = JSON.parse(JSON.stringify(this.state.info || {}))
    nInfo[name] = val
    this.setState({
      info: nInfo
    })
  }
  /**
   * 提交
   */
  handleSubmit = () => {
    const { info } = this.state

    if (!info.promoter_name) {
      return showToast('请输入团长姓名')
    }

    if (!info.telephone) {
      return showToast('请输入电话')
    }
    Taro.showModal({
      title: '编辑销售团长',
      content: '是否保存',
      cancelText: '取消',
      confirmText: '保存'
    }).then((e) => {
      if (e.confirm) {
        Taro.showLoading('正在提交')
        api.distribution
          .update(info)
          .then((res) => {
            Taro.hideLoading()
            showToast('修改成功', Taro.navigateBack)
          })
          .catch(() => {
            Taro.hideLoading()
          })
      }
    })
  }

  render() {
    const { colors } = this.props
    const { info } = this.state
    return (
      <View className='page-address-edit' style={isWxWeb && { paddingTop: 0 }}>
        <SpNavBar title='编辑销售团长信息' leftIconType='chevron-left' fixed='true' />
        <View className='page-address-edit__form'>
          <SpCell
            className='logistics-no border-bottom'
            required
            title='团长昵称'
            value={
              <AtInput
                name='promoter_name'
                value={info.promoter_name}
                placeholder='请输入姓名'
                onChange={(e) => this.handleChange('promoter_name', e)}
              />
            }
          ></SpCell>

          <SpCell
            className='logistics-no border-bottom'
            title='团长电话'
            required
            value={
              <AtInput
                type='phone'
                name='telephone'
                value={info.telephone}
                placeholder='请输入电话号码'
                onChange={(e) => this.handleChange('telephone', e)}
              />
            }
          ></SpCell>
        </View>
        <View className='btns'>
          <Button
            type='primary'
            onClick={this.handleSubmit}
            className='submit-btn'
            style={`background: ${colors.data[0].primary}; border-color: ${colors.data[0].primary};border-radius: 25px;`}
          >
            保存
          </Button>
        </View>
      </View>
    )
  }
}
